<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <link rel="stylesheet icon" type="text/css" href="${pageContext.request.contextPath}/admin/images/favicon.ico">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花礼网</title>
</head>
<body>
    <!-- 导航条start -->
    <%@include file="header.jsp"%>
    <!-- 导航条end -->

    <!-- 轮播图start  改小圆点颜色  改位置-->
    <div id="myCarousel" class="carousel slide container colol" data-ride="carousel" data-interval="3000" >
        <!-- 轮播（Carousel）指标(小圆点) -->
        <ol class="carousel-indicators testyuandian" style="margin-bottom: -10px; ">
            <li data-target="#myCarousel" data-slide-to="0" class="active" ></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>   
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <a href="">
                    <img src="assets/banner3.png" alt="Second slide">
                </a>
            </div>
            <div class="item ">
                <a href="">
                    <img src="assets/banner2.jpg" alt="Second slide">
                </a>
            </div>
        </div>
    </div>
    <!-- 轮播图end-->

    <!-- 下面的导航栏start -->
    <div class="main-nav container">
        <div class="center">
            <div class="main-nav-left"></div>
            <div class="main-nav-item main-nav-lover">
                送恋人
                <img class="icon-go" src="assets/nav_go.png">
                <span class="tborder"></span>
            </div>
            <div class="main-nav-item main-nav-elder">
                送长辈
                <img class="icon-go" src="assets/nav_go.png">
                <span class="tborder"></span>
            </div>
            <div class="main-nav-item main-nav-male">
                送男性
                <img class="icon-go" src="assets/nav_go.png">
                <span class="tborder"></span>
            </div>
            <div class="main-nav-item main-nav-friend">
                送闺蜜
                <img class="icon-go" src="assets/nav_go.png">
                <span class="tborder"></span>
            </div>
            <div class="main-nav-right"></div>
        </div>
    </div>
    <!-- 下面的导航栏end -->

    <!-- 主内容start -->
    <div class="container">
        <img src="./assets/card.png" alt="" style="width: 1140px;">

        <!-- 鲜花start -->
        <div class="product product-lover">
            <img src="./assets/lover_title_flower.png" alt="" srcset="" style="width: 1140px; margin-top: 20px;">
            <img src="assets/lover_decorate_flower.png" alt="" class="product-decorate">
            <div class="product-list product-list-flower">
                <!-- 鲜花的第一部分内容 -->
                <div class="product-list-type1">
                    <div class="product-list-type1-left">
                        <div id="101" class="product-item"></div>
                    </div>
                    <div class="product-list-type1-right">
                        <div id="102" class="product-item" style="margin-right: 40px;"></div>
                        <div id="103" class="product-item"></div>
                    </div>
                </div>
                <!-- 鲜花的第二部分内容 -->
                <div class="product-list-type2">
                    <div class="product-list-type2-bg"></div>
                    <div class="product-list-type2-left">
                        <div id="104" class="product-item" style="margin-right: 40px;"></div>
                        <div id="105" class="product-item"></div>
                        <div id="106" class="product-item" style="margin-right: 40px;"></div>
                        <div id="107" class="product-item"></div>
                    </div>
                    <div class="product-list-type2-right">
                        <div id="108" class="product-item"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 鲜花end -->

        <!-- 永生花start -->
        <div class="product product-lover">
            <img src="assets/lover_title_ysh.png" alt="" srcset="" style="width: 1140px; margin-top: 20px;">

            <div class="product-list product-list-flower">
                <!-- 鲜花的第一部分内容 -->
                <div class="product-list-type1">
                    <div class="product-list-type1-left">
                        <div id="201" class="product-item"></div>
                    </div>
                    <div class="product-list-type1-right">
                        <div id="202" class="product-item" style="margin-right: 40px;"></div>
                        <div id="203" class="product-item"></div>
                    </div>
                </div>
                <!-- 鲜花的第二部分内容 -->
                <div class="product-list-type2">
                    <div class="product-list-type2-bg"></div>
                    <div class="product-list-type2-left">
                        <div id="204" class="product-item" style="margin-right: 40px;"></div>
                        <div id="205" class="product-item"></div>
                        <div id="206" class="product-item" style="margin-right: 40px;"></div>
                        <div id="207" class="product-item"></div>
                    </div>
                    <div class="product-list-type2-right">
                        <div id="208" class="product-item"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 永生花end -->

        <!-- 蛋糕start -->
        <div class="product product-lover">
            <img src="assets/lover_title_cake.png" alt="" srcset="" style="width: 1140px; margin-top: 20px;">

            <div class="product-list product-list-flower">
                <!-- 鲜花的第一部分内容 -->
                <div class="product-list-type1">
                    <div class="product-list-type1-left">
                        <div id="301" class="product-item"></div>
                    </div>
                    <div class="product-list-type1-right">
                        <div id="302" class="product-item" style="margin-right: 40px;"></div>
                        <div id="303" class="product-item"></div>
                    </div>
                </div>
                <!-- 鲜花的第二部分内容 -->
                <div class="product-list-type2">
                    <div class="product-list-type2-bg"></div>
                    <div class="product-list-type2-left">
                        <div id="304" class="product-item" style="margin-right: 40px;"></div>
                        <div id="305" class="product-item"></div>
                        <div id="306" class="product-item" style="margin-right: 40px;"></div>
                        <div id="307" class="product-item"></div>
                    </div>
                    <div class="product-list-type2-right">
                        <div id="308" class="product-item"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 蛋糕end -->

    </div>
     <!-- 主内容end -->

    <script type="text/javascript">
        $(function() {
            $.get("getGoodsIndex",null,function(arr){
                for (var z=0;z<3;z++){
                    var f101=arr[z][0];
                    s="<a href='${pageContext.request.contextPath}/getGoodsById?id="+f101.id+"'>" +
                        "<div class='product-item-bg'></div>" +
                        "<div class='product-item-pic'><img src='./image/"+f101.picture+"' ></div>" +
                        "<div class='product-item-info'><p class='product-item-title'><span>"+f101.name+"</span></p>" +
                        "<p class='product-item-desc'>"+f101.intro+"</p><p class='product-item-price'>￥"+f101.price+"元</p>" +
                        "<div class='buy-btn'>立即购买</div></div>" +
                        "</a>";
                    $("#"+f101.id).html(s);

                    for (var i=1;i<arr[z].length-1;i++){
                        var f102=arr[z][i];
                        s='<a href="${pageContext.request.contextPath}/getGoodsById?id='+f102.id+'" style="text-decoration: none;"><div class="product-item-pic"><img src="./image/'+f102.picture+'" alt="" style="width: 100%;"></div>' +
                            '<div class="product-item-info"><p class="product-item-title"><span>'+f102.name+'</span></p>' +
                            '<p class="product-item-right-price">￥'+f102.price+'</p><div class="buy-btn">立即购买</div></div></a>'
                        $("#"+f102.id).html(s);
                    }

                    var f108=arr[z][7];
                    s='<a href="${pageContext.request.contextPath}/getGoodsById?id='+f108.id+'" style="text-decoration: none;"><div class="product-item-bg"></div><div class="product-item-pic"><img src="./image/'+f108.picture+'" alt="" srcset=""></div>' +
                        '<div class="product-item-info" style="margin-top: 80px;"><p class="product-item-title"><span>'+f108.name+'</span></p>' +
                        '<p class="product-item-desc">'+f108.intro+'</p>' +
                        '<div class="product-item-info-right"><p class="product-item-price">￥'+f108.price+'</p><div class="buy-btn">立即购买</div></div></div></a>';
                    $("#"+f108.id).html(s);
                }
            });
        });
    </script>

    <!-- 页脚start -->
    <%@include file="footer.jsp"%>
</body>
</html>